<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<title>Original</title>
		<!-- Note the timeouts in the functions are chosen such they constitute
		     a set with distinct subset sums. That is is a combination of any two
		     or more were to be executed the total time for that distinct combination
		     would be unique. This was done so we could do a ALL/AND/OR type of test
		     and know that with the combination of expected conditions the execution
		     was successful as the unique time took place. -->
		<!-- The set we are using is {6,9,11,12,13} -->
		<!-- (could also use {3,5,6,7} which would reduce total time)-->
		<script type="text/javascript">
		function add_content(target_container, content) {
			p = document.createElement('p');
			p.appendChild(document.createTextNode(content));
			container = document.getElementById(target_container);
			container.appendChild(p);
		}

		function delayed_button_state() {
			setTimeout(function() {
				state_btn = document.getElementById('enabledDisabledBtn')
				if (state_btn.hasAttribute("disabled")) {
					state_btn.removeAttribute("disabled")
					state_btn.value = "Enabled"
				} else {
					state_btn.setAttribute("disabled", "")
					state_btn.value = "Disabled"
				}
			},900)
		}
		function delayed_title_change() {
			setTimeout(function(){
				document.title='Delayed';
			},600);
		}

		function delayed_add_element() {
		    setTimeout(function(){
		        const newElem = document.createElement("input");
		        newElem.setAttribute("type", "button");
		        newElem.setAttribute("id", "added_btn");
		        newElem.setAttribute("value", "Added Button");
		        const container = document.getElementById("container");
		        document.body.insertBefore(newElem, container);
		    },1100);
		}
		</script>
	</head>
	<body>
		<a href="javascript:return false;" onclick="document.title='Changed'; return false;">change title</a><br/>
		<a href="javascript:return false;" onclick="delayed_title_change(); return false;">delayed change title</a><br/>
		<a href="javascript:return false;" onclick="delayed_add_element(); return fales;">delayed add element</a><br/>
		<a href="javascript:return false;" onclick="add_content('target', 'added content'); return false;">add content</a><br/>
		<a id="unicode" href="javascript:return false;" onclick="document.title='äää'; return false;">title to ääää</a><br/>
		<p>
			<input type="radio" name="group" value="title" 
			onclick="document.title='Changed by Button';" />Change Title<br/>
			<input type="radio" name="group" value="content" 
			onclick="add_content('button_target', 'added by button');"/>Add Content<br/>
        </p>
        <div id="target">
		</div>
		<div id="button_target">
        </div>
        <form name=myform>
            <input type=button value="Change the title" 
            onClick="if(confirm('Really change the title?'))
            document.title += ' Changed!';" >
		</form>
		<p>
			<input type=button id=stateChangeBtn value="Change the button state"
			onClick="delayed_button_state()" />
			<input type=button id=enabledDisabledBtn value="Disabled"
			disabled />
		</p>
		<p>
			<div id="container"></div>
		</p>
		<p>
			<form name=titleChanger>
				<td>
					<input type=text id=titleChangeTxt value="Enter Title here">
				</td>
				<td>
					<input type=button id=titleChangeBtn value="Set Title" 
					onClick="document.title = document.getElementById('titleChangeTxt').value;" >
				</td>
			</form>
		</p>
	</body>
</html>

